<template>
  <fui-bottom-popup :show="show" @close="closePopup">
    <view class="comment-box py-[40rpx] px-[30rpx]">
      <view class="comment-header flex-center">
        <view>全部评论 </view>
        <image
          @click="show = false"
          :src="$getImg('/img/common/close.png')"
          mode="widthFix"
        />
      </view>

      <!-- 评论列表 -->
      <view class="comment-list flex-column py-[30rpx]">
        <MeScrollPage
          type="uni"
          :config="{
            height: 900,
            up: {
              toTop: {
                bottom: 180,
              },
            },
          }"
          :page="page"
          ref="MeScrollPageREF"
        >
          <template v-for="(item, index) in commentLis" :key="index">
            <commentItem
              :postId="page.params.bindId"
              :item="item"
              :type="type"
            ></commentItem>
          </template>
        </MeScrollPage>
      </view>
    </view>
    <send
      @reGetData="getCommentList"
      :type="type"
      :bindId="page.params.bindId"
    ></send>
  </fui-bottom-popup>
</template>

<script lang="ts" setup>
import send from "./components/send.vue";
import commentItem from "./components/commentItem.vue";
import { getPostCommentListAPI } from "@/api/posts";
import { PageProps } from "@/hooks/usePage";

const show = ref(false);
const closePopup = () => {
  show.value = false;
};

const props = defineProps({
  type: {
    type: String,
    default: "3", // 类型  1. 产品 2. 视频  3.帖子
  },
});

const commentLis = ref<any[]>([]);

const MeScrollPageREF = ref();

const page = reactive<PageProps>({
  params: {
    // postId: "",
    // pid: "", // 父级id
    type: 3, // 类型  1. 产品 2. 视频  3.帖子
    bindId: "", // 绑定id,
    size: 20,
  },
  fetchData: undefined,
  data: [],
});
watchEffect(() => {
  commentLis.value = page.data!.map((row) => {
    return {
      ...row,
      reply: [],
      chirdTotal: 0,
    };
  });
});
onLoad(() => {
  // 监听评论点击
  // uni.$on("commentPost", (item: any) => {
  //   console.log("点击了评论", item);
  //   showComment(item.id);
  // });
  // 发送后重新获取评论列表
  // uni.$on('refreshCommentList', () => {
  //     console.log('重新获取评论12313')
  //     nextTick(() => {
  //         MeScrollPageREF.value.resetData()
  //     })
  // })
});
const getCommentList = () => {
  console.log("重新获取评论12313");
  nextTick(() => {
    MeScrollPageREF.value.resetData();
  });
};

// onUnload(() => {
//     // 移除监听
//     // uni.$off("commentPost");
//     uni.$off('refreshCommentList')
// })

// 显示评论
const showComment = (id: string) => {
  show.value = true;
  page.params.bindId = id;
  page.params.type = props.type; // 1. 产品 2. 视频  3.帖子
  page.fetchData = getPostCommentListAPI;

  console.log("show", show.value);

  console.log("获取评论列表", show.value);
  // 获取评论
  nextTick(() => {
    MeScrollPageREF.value.resetData();
  });
};

defineExpose({
  postId: page.params.bindId,
  page,
  showComment,
});
</script>
<style lang="scss" scoped>
.comment-box {
  // height: 80vh;
  font-weight: 500;
  padding-bottom: 0;

  .comment-header {
    position: relative;
    font-size: 15px;
    font-weight: 700;
    image {
      position: absolute;
      right: 0;
      width: 20rpx;
    }
  }
}
</style>
